.heared{
    width: 100%;
    height: 60px;
    background-color: red;
}
#banner{
	background-color: #000000;
	.title{
	    font-size: 30px;
	    color: #ffffff;
	}
	video{
		position: absolute;
		width: auto;
		height: auto;
		min-height: 100%;
		min-width: 100%;
		right: 0;
		bottom: 0;
		z-index: -100;
		display: none;
	}
	.content{
		color: #999999;
		padding: 20em 0px;
		text-align: center;
		background-color: #000000;
		.title{
			font-size: 44px;
			text-transform:uppercase;
			font-family: OSLight;
			padding: 0.3em 0;
			span{
				color: #fcac45;
				font-family: OSBold;
			}
		}
		.desc{
			font-size: 1.4em;
			font-family: OSLight;
			padding-bottom: 7.5em;
			span{
				font-family: OSBold;
			}
		}
	}

	.down{
		width:50px;
		height: 50px;
		margin: 0 auto;
		border-radius: 50%;
		border: 1px solid #c3c3c3;
		transition: all 0.5s linear;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		a{
			text-align: center;
		}
		img{
			width:50%;
			height:50%;
			object-fit: cover;
			display: inline-block;
		}
		&:hover{
			box-shadow: 0px 5px 10px #c3c3c3;
			transform: translateY(-10px);
		}
	}

	@media screen and (max-width: 770px) {
		.content .desc{
			font-size: 1em;
			padding-bottom:11em;
		}
	}

	@media screen and (max-width: 560px) {
		.content .title{
			font-size: 2em;
		}
		.content .desc{
			font-size: 0.8em;
			padding-bottom:13em;
		}
	}
}
.about{
	padding-top: 5em;
	.container{
		display: flex;
		justify-content: space-around;
		.left{
			width: 50%;
		}
		.right{
			width: 50%;
			text-transform:uppercase;
			.title{
				font-size: 1.4em;
				color: #636363;
			}
			h3{
				color: #222222;
				font-size: 2.2em;
				span:first-child{
					padding-bottom: 0.2em;
					border-bottom: 4px solid #fcac45;
				}
				span:last-child{
					font-family: OSBold;
				}
			}
			.desc{
				padding: 1em 0;
				font-size: 1.2em;
				color: #6c6c6c;
				text-transform:none;
			}
	
			li{
				span{
					font-family: OSBold;
					font-style:normal; 
				}
				font-size: 1.2em;
				color: #5a5a5a;
				font-family: OSLight;
				text-transform:none;
				font-style:italic; 
				margin-bottom: 0.6em;
				text-indent: 1.5em;
				background: url('../images/about-list-bg.png') left center no-repeat;
			}
			.btns{
				width: 195px;
				height: 45px;
				text-align:center;
				line-height: 45px;
				border: 1px solid #616161;
				border-radius: 5px;
				margin-top:2.3em;
				transition: all 0.1s linear;
				cursor: pointer;
				img{
					margin-top: -2px;
				}
	
				&:hover{
					box-shadow: 0px 5px 10px #616161;
					transform: translateY(-10px);
				}
			}
		}
		@media screen and (max-width: 990px) {
			.right h3{
				font-size: 2em;
			}
			.right .desc{
				font-size: 1.1em;
			}
			.right li{
				font-size: 1em;
			}
		}
		@media screen and (max-width: 745px) {
			.left{
				display: none;
			}
			.right{
				width: 70%;
			}
		}
		@media screen and (max-width: 545px) {
			.right{
				width: 80%;
			}
			.right h3{
				font-size: 1.5em;
			}
			.right .desc{
				font-size: 0.9em;
			}
			.right li{
				font-size: 0.8em;
			}
		}
		@media screen and (max-width: 420px) {
			.right h3{
				font-size: 1.3em;
			}
		}
	}
}
.figure{
	margin-top: 2.5em;
	background-color: #070707;
	padding: 5em;
	.figure_title{
		font-size: 1.8em;
		color: #fff;
		font-family: OSLight;
		text-align: center;
	}
	.figure_title span{
		font-family: OSBold;
	}
	.figure_line{
		width: 5em;
		height: 2.5em;
		margin: 0px auto;
	}
	.figure_list {
		margin-top: 1.5em;
		display: flex;
		justify-content: space-between;
		li {
			width: 20%;
			.img {
				border-radius: 50%;
				overflow: hidden;
				margin: 0 auto;
				transition: all 0.5s linear;
				img {
					width: 100%;
				}
			
				&:hover{
					transform: rotate(360deg);
				}
			}
			
			.content {
				padding: 2em 0;
				color: #ffffff;
				text-align: center;
			
				h3 {
					font-size: 1.4em;
					font-family: OSBold;
				}
			
				span {
					font-size: 1em;
					font-family: OSLight;
				}
			
				p {
					font-size: 1em;
					padding-top: 2em;
				}
			}
		}
	}
	.btns{
		width: 100%;
		text-align:center;
		padding-top: 2em;
		label{
			width: 0.8em;
			height: 0.8em;
			display: inline-block;
			background-color: #fff;
			margin-right: 1em;
			&:hover{
				background-color: #fcac45;
			}
		}
	}
	@media screen and (max-width: 780px) {
		.figure_list {
			flex-wrap: wrap;
			li {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 1em;

				.img {
					border-radius: 0;
					width: 20%;
				}

				.content {
					text-align: left;
					padding: 0;
					margin-left: 1.6em;
				}
			}
		}
	}
	@media screen and (max-width: 680px) {
		.figure_list li .img {
			width: 50%;
		}

		.figure_list li .content {
			padding-left: 1em;
		}
	}
	@media screen and (max-width: 560px) {
		.figure_list li .img {
			width: 70%;
		}

		.figure_list li .content {
			padding: 0em 1em;
			h3{
				font-size:1em;
			}
			p{
				padding-top: 1.5em;
				font-size: 0.8em;
			}
		}
	}
}
@media screen and (max-width: 450px) {
	.figure{
		padding: 5em 2em;
	}
	.figure_list li .img {
		width: 70%;
	}

	.figure_list li .content {
		padding: 0em 0.5em;
		h3{
			font-size:1em;
		}
		p{
			padding-top: 1.5em;
			font-size: 0.8em;
		}
	}
}

.figure1{
	padding: 5em 10%;
	.figure1_title{
		font-size: 2.3em;
		color: #000;
		font-family: OSLight;
		text-align: center;
	}
	.figure1_title span{
		font-family: OSBold;
	}
	.figure1_line{
		width: 5em;
		height: 2.5em;
		margin: 0px auto;
	}
	.figure1_{
		margin: 0px auto 6em;
		font-size: 0.9em;
		color: #000;
		font-family: OSLight;
		text-align: center;
	}
	.figure1_list {
		margin-top: 1.5em;
		display: flex;
		justify-content: space-between;
		li {
			width: 23%;
			.figure1_img {
				width: 8em;
				height: 8em;
				border: 5px solid #fcac45;
				border-radius: 50%;
				overflow: hidden;
				margin: 0 auto;
				transition: all 0.5s linear;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.figure1_content {
				padding: 2em 0;
				color: #000;
				text-align: center;
			
				h3 {
					font-size: 1.4em;
					font-family: OSBold;
				}
			
				span {
					font-size: 1em;
					font-family: OSLight;
				}
			
				p {
					font-size: 1em;
					padding-top: 2em;
				}
			}
		}
	}
	@media screen and (max-width: 950px) {
		.figure1_title{
			font-size: 2em;
		}
		.figure1_list li .figure1_content h3{
			font-size: 1.3em;
		}
	}
	@media screen and (max-width: 780px) {
		.figure1_list {
			flex-wrap: wrap;
			li {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 1em;

				.figure1_img {
					border-radius: 0;
					width: 30%;
					margin-right: 1.5em;
				}
				.figure1_content {
					text-align: left;
					padding: 0;
				}
			}
		}
	}
	@media screen and (max-width: 680px) {
		.figure1_list li .figure1_img {
			width: 40%;
		}
		.figure1_list li .figure1_content {
			padding-left: 1em;
		}
	}
	@media screen and (max-width: 560px) {
		.figure1_title{
			font-size: 1.7em;
		}
		.figure1_list li .figure1_img {
			width: 70%;
		}

		.figure1_list li .figure1_content {
			padding-left: 1em;
			h3{
				font-size:1em;
			}
			p{
				padding-top: 1.5em;
				font-size: 0.8em;
			}
		}
	}
}
@media screen and (max-width: 450px) {
	.figure1{
		padding: 5em 2em;
	}
	.figure1_title{
		font-size: 1.4em;
	}
	.figure1_list li .figure1_content {
		padding-left: 0.5em;
		h3{
			font-size: 1.3em;
		}
		p{
			padding-top: 1em;
			font-size: 0.9em;
		}
	}
	.figure1_list li .figure1_img {
		width: 65%;
	}
}

.trademark{
	padding: 5em 10%;
	background-color: #070707;
	.trademark_title{
		font-size: 2.3em;
		color: #fff;
		font-family: OSLight;
		text-align: center;
	}
	.trademark_title span{
		font-family: OSBold;
	}
	.trademark_line1{
		width: 5em;
		height: 2.5em;
		margin: 0px auto;
	}
	.trademark_line2{
		margin: 0px auto;
		padding: 5em 0em;
		font-size: 0.9em;
		color: #fff;
		font-family: OSLight;
		text-align: center;
	}
	.btns{
		width: 100%;
		text-align:center;
		padding-top: 2em;
		label{
			width: 0.8em;
			height: 0.8em;
			display: inline-block;
			background-color: #fff;
			margin-right: 1em;
			&:hover{
				background-color: #fcac45;
			}
		}
	}
	@media screen and (max-width: 580px) {
		.trademark_title{
			font-size: 2em;
		}
	}
	@media screen and (max-width: 410px) {
		.trademark_title{
			font-size: 1.5em;
		}
		
	}
}

#work{
   padding: 5em 0;
   .title{
      background: url('../images/title-background.png') no-repeat bottom center;
      margin-bottom: 4em;
      h3{
         color: #222222;
         font-family: OSLight;
         font-size: 3em;
         text-transform: uppercase;
         text-align: center;
         padding-bottom: 0.6em;
         span{
            font-family: OSBold;
         }
      }
   }
   p{
      text-align:center;
      font-size:1.1em;
      color: #6c6c6c;
      padding-bottom: 3.5em;
   }
   .navlist{
      display:flex;
      justify-content: space-between;
      padding-bottom: 1em;
      .filter{
         text-transform: uppercase;
         font-size: 1.2em;
         color: #222222;
      }
      .all{
         a{
            color: #6c6c6c;
            font-size: 1.2em;
            padding: 0 1em;
            border-right: 1px solid #6c6c6c;
            &:hover{
               color: #222222;
            }
         }
         a:last-child{
            border-right: none;
            padding-right: 0;
         }
      }
   }
   .list{
      display: flex;
      justify-content:space-between;
      flex-wrap: wrap;
      .item{
         margin-bottom: 1em;
      }
   }

   @media screen and (max-width: 650px) {
      .title h3{
         font-size: 2em;
      }
      p{
         font-size:1em;
         padding: 0 1em 2em 1em;
      }
      .navlist .filter{
         display: none;
      }
   }

   @media screen and (max-width: 500px) {
      .title h3{
         font-size: 1.5em;
         padding-bottom: 1.6em;
      }
      .navlist .all a{
         font-size:0.8em;
      }
      .list .item{
         width: 45%;
      }
   }
}
#contact{
   padding: 5em 0;
   .container{
      padding: 0 10em;
   }
   .title{
      background: url('../images/title-background.png') no-repeat bottom center;
      margin-bottom: 4em;
      h3{
         color: #222222;
         font-family: OSLight;
         font-size: 3em;
         text-transform: uppercase;
         text-align: center;
         padding-bottom: 0.6em;
         span{
            font-family: OSBold;
         }
      }
   }
   p{
      text-align:center;
      font-size:1.1em;
      color: #6c6c6c;
      padding-bottom: 3.5em;
   }
   textarea{
      resize: none;
   }
   .box{
      .top{
         display: flex;
         justify-content: space-between;
         .left, .right{
            margin-bottom: 1em;
            width: 45%;
            div{
               color: #636363;
               font-size: 1.2em;
               text-transform: capitalize;
               margin-bottom: 0.5em;
               sup{
                  color: red;
               }
               input{
                  width: 100%;
                  height: 40px;
               }
            }
         }
      }

      .message{
         width: 100%;
         margin-bottom: 2em;
         div{
            color: #636363;
            font-size: 1.2em;
            text-transform: capitalize;
            margin-bottom: 0.5em;
            sup{
               color: red;
            }
         }
         textarea{
            width: 100%;
            height: 160px;
         }
      }

      .send{
         width: 165px;
         height: 40px;
         text-align:center;
         line-height: 40px;
         background-color:#fcac45;
         color: #fff;
         cursor: pointer;
         float: right;
      }
   }

   @media screen and (max-width: 999px) {
      .container{
         padding: 0 2em;
      }
   }

   @media screen and (max-width: 600px) {
       .title h3{
         font-size:2em;
       }
   }

   @media screen and (max-width: 500px) {
      &{
         padding: 0 0 3em 0;
      }
      .title h3{
        font-size:1.5em;
        padding-bottom: 1.5em;
      }
      p{
         font-size:1em;
      }
  }
}

.trademark1{
	padding: 5em 10%;
	background-color: #070707;
	.trademark1_title{
		font-size: 2.3em;
		color: #fff;
		font-family: OSLight;
		text-align: center;
	}
	.trademark1_title span{
		font-family: OSBold;
	}
	.trademark1_line1{
		width: 5em;
		height: 2.5em;
		margin: 0px auto;
	}
	.trademark1_line2{
		margin: 0px auto;
		padding: 2em 0em 0em;
		font-size: 1.2em;
		color: #e8e8e8;
		font-family: OSBold;
		text-align: center;
		.p2{
			padding: 2em 0em;
			
		}
		.p2 span{
			font-family: OSLight;
		}
	}
	.btns{
		width: 100%;
		text-align:center;
		padding-top: 2em;
		label{
			width: 0.8em;
			height: 0.8em;
			display: inline-block;
			background-color: #fff;
			margin-right: 1em;
			&:hover{
				background-color: #fcac45;
			}
		}
	}
	@media screen and (max-width: 580px) {
		.trademark1_title{
			font-size: 2em;
		}
	}
	@media screen and (max-width: 410px) {
		.trademark1_title{
			font-size: 1.5em;
		}
		
	}
}

#footer{
    background-color:#222222;
    color: white;
    .container{
        display: flex;
        justify-content:space-between;
        align-items:center;
        height: 100%;
        padding: 2em 0;
        .left, .right{
            width: 50%;
        }
        .left{
            color: #b2b2b2;
            font-size: 0.8em;
        }
        .right{
            text-align: right;
            a{
                width: 30px;
                height: 30px;
                border: 2px solid #b2b2b2;
                border-radius:50%;
                line-height: 30px;
                text-align: center;
                font-size:1.3em;
                color: #b2b2b2;
                font-family: OSBold;
                margin-right: 0.5em;
                transition: all 0.3s ease-in-out;
                &:hover{
                    box-shadow: 0px 0px 10px #b2b2b2;
                    transform: translateY(-10px);
                }
            }
        }
    }
    @media screen and (max-width: 700px) {
        .container{
            flex-wrap: wrap;
            padding: 1.5em 0;
            .left, .right{
                width: 100%;
                text-align: center;
            }
            .left{
                padding-bottom: 1.2em;
            }
        }
    }
}

#back{
    position:fixed;
    bottom:100px;
    right: 5%;
    #gotop{
        width: 90px;
        height: 90px;
        img{
            width: 100%;
        }
    }
	@media screen and (max-width: 960px) {
		right: 2%;
	    #gotop{
	        width: 50px;
	        height: 50px;
	    }
	}
    @media screen and (max-width: 450px) {
        #gotop{
            width: 45px;
            height: 45px;
        }
    }
}
